<template>
  <el-row>
    <el-button type="primary" style="margin-bottom: 12px" @click="handleAdd"
      >添加
    </el-button>
    <el-table
      :data="tableData"
      class="table-body"
      :header-cell-style="{ background: '#F4F6F9', color: '#1D2129' }"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="name" show-overflow-tooltip label="标题">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleCheck(scope.row.id)"
            >{{ scope.row.name }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">
          {{
            scope.row.status === 1
              ? "草稿"
              : scope.row.status === 2
              ? "待审核"
              : scope.row.status === 3
              ? "已上架"
              : scope.row.status === 4
              ? "驳回"
              : scope.row.status === 5
              ? "下架"
              : scope.row.status === 6
              ? "回收站"
              : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" width="120" label="发布人"></el-table-column>
      <el-table-column
        prop="updateDate"
        label="添加时间"
        width="160"
      ></el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row.id)"
            >编辑
          </el-button>
          <el-button :disabled="scope.row.status !== 3" type="text" @click="handleDown(scope.row.id)"
            >下架
          </el-button>
          <el-button :disabled="scope.row.status === 2 || scope.row.status === 3" type="text" @click="handleDelete(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :count="Number(count)"
      :current="1"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </el-row>
</template>

<script>
import { mapMutations } from "vuex";
import Pagination from "@/components/Pagination.vue";
// import { operationArticleApi } from "@/api/modules/article.api";
import { deleteNoticeApi, downNoticeApi } from "@/api/modules/notice.api";
// import { getArticleDetailApi } from "@/api/modules/article.api";

export default {
  components: { Pagination },
  props: ["tableData", "count"],
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getData() {},
    handleSizeChange(pageSize) {
      this.page.pageNum = pageSize;
      this.$emit("getTableData", this.page);
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;
      this.$emit("getTableData", this.page);
    },
    async handleCheck(id) {
      await this.$router.push({
        name: "/writings/notifications/check",
        query: { id, type: "0" },
      });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "消息通知",
          path: "/writings/list",
        },
        {
          name: "查看",
          path: "/writings/notifications/detail",
        },
      ]);
    },
    handleEdit(id) {
      this.$router.push({
        name: "/writings/notifications/detail",
        query: { id, type: "0" },
      });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "通知公告",
          path: "/writings/notifications",
        },
        {
          name: "编辑",
          path: "/writings/notifications/detail",
        },
      ]);
    },
    handleAdd() {
      this.$router.push({ path: "/writings/notifications/add" });
      this.setBreadcrumb([
        {
          name: "文章管理",
          path: "/writings",
        },
        {
          name: "通知公告",
          path: "/writings/notifications",
        },
        {
          name: "添加",
          path: "/writings/notifications/add",
        },
      ]);
    },
    async handleDown(id) {
      await downNoticeApi({
        idList: [id],
      });
      this.$message({
        message: "成功",
        type: "success",
      });
      this.$emit("getTableData", this.page);
    },
    async handleDelete(id) {
      // console.log('id',id)
      await deleteNoticeApi({ id });
      this.$message({
        message: "成功",
        type: "success",
      });
      this.$emit("getTableData", this.page);
    },
  },
};
</script>
